<template>
    <div class="login">
        <div class="login-box">
            <template v-if="!error">
                <div class="qrcode" v-if="!isScan">
                    <img :src="qrcode" class="img" v-if="qrcode != ''">
                    <img src="../../assets/qrcode-bg.gif" class="img" v-else>
                    <div>
                        <p class="sub_title">请使用手机默往扫码登录</p>
                        <!--<p class="sub_title">手机</p>-->
                    </div>
                </div>
                <div class="avatar" v-else>
                    <img :src="avatar" alt="" class="img">
                    <p class="tips">扫描成功，请在手机上确认登录</p>
                    <div class="action" @click="changeAccount">切换账号</div>
                </div>
            </template>
            <template v-else>
                <div class="error">
                    <img class="img" src="../../assets/no_message.png" alt="">
                    <p class="tips">网络异常，请检查你的网络设置</p>
                    <div class="refresh" @click="refresh()">刷新</div>
                </div>
            </template>
        </div>
    </div>
</template>
<script>
import { loginApi } from '@/api'
export default {
    data() {
        return {
            qrcode: '',
            avatar: '',
            login_addr: '',
            isScan: false,
            error: false
        }
    },
    mounted() {
        this.init()
    },
    methods: {
        init() {
            loginApi.init().then(res => {
                if (res.code == 101) {
                    this.qrcode = res.data.img
                    this.login_addr = res.data.login_addr
                    this.login()
                }
                if (res.code == 400) {
                    this.error = true
                }
            })
        },
        login() {
            this.isScan = false
            loginApi.login(this.login_addr).then(res => {
                if (res.code == 101) {
                    this.qrcode = res.data.img
                    this.login_addr = res.data.login_addr
                    this.login()
                }
                if (res.code == 102) {
                    this.avatar = res.data.user_icon
                    this.isScan = true
                    this.confirm()
                }
            })
        },
        confirm() {
            loginApi.login(this.login_addr).then(res => {
                if (res.code == 103) {
                    sessionStorage.setItem('key', res.data.key)
                    this.$store.dispatch('getUserInfo', res.data.user_info)
                    this.$store.dispatch('initApp')
                    this.$router.push({
                        path: '/message'
                    })
                } else {
                    this.login()
                }
            })
        },
        changeAccount() {
            window.location.reload()
        },
        refresh() {
            Object.assign(this.$data, this.$options.data())
            this.init()
        }
    }
}
</script>

<style lang="less" scoped>
.login {
    height: 100%;
    min-width: 860px;
    min-height: 700px;
    overflow: auto;
    position: relative;
    .login-box {
        position: absolute;
        top: 50%;
        left: 50%;
        margin-left: -190px;
        margin-top: -270px;
        border-radius: 10px;
        background-color: #fff;
        width: 380px;
        height: 540px;
        box-shadow: 0 2px 10px #999;
        .qrcode {
            position: relative;
            text-align: center;
            .img {
                display: block;
                width: 230px;
                height: 230px;
                margin: 111px auto 26px;
            }
            .sub_title {
                text-align: center;
                font-size: 20px;
                color: #23242B;
                line-height: 26px;
                margin-bottom: 13px;
            }
            .sub_desc {
                text-align: center;
                font-size: 17px;
                color: #9DA4B3;
                line-height: 22px;
            }
        }
        .avatar {
            text-align: center;
            margin-top: 142px;
            .img {
                width: 150px;
                height: 150px;
                border-radius: 4px;
                margin-bottom: 46px;
            }
            .tips {
                color: #23242B;
                font-size: 20px;
                line-height: 26px
            }
            .action {
                color: #4288FF;
                font-size: 17px;
                line-height: 22px;
                margin-top: 12px;
            }
        }
        .error {
            text-align: center;
            margin-top: 156px;
            .img {
                width: 114px;
                height: 114px;
            }
            .tips {
                margin-top: 67px;
                line-height: 26px;
                font-size: 20px;
                color: #D0021B;
            }
            .refresh {
                display: inline-block;
                width: 120px;
                height: 40px;
                line-height: 40px;
                margin-top: 40px;
                border-radius: 10px;
                font-size: 17px;
                color: #23242B;
                border: 1px solid #D9D9D9;
            }
        }
    }
}
</style>
